<!-- Dom模板 -->
<template>
  <div class="box">
    <!-- 收藏厨师 -->
    <div>
      <Fanhui :a="as"> </Fanhui>
    </div>

    <div class="sousuo">
      <i class="el-icon-search souds"></i>
      <input class="inputse" type="text" placeholder="厨师姓名关键词搜索" />
    </div>


    <div class="huadongranru">
    <div class="rsesw" v-for="(item, index) in dataList" :key="index">
      <div class="zuo"></div>
      <div class="you">
        <h4>{{ item.name }}</h4>
        <!-- 关注图标 -->
        <div
          class="my_button"
          @click="favor"
          :style="{ backgroundColor: bg_color, color: ft_color }"
          :class="guanzhu == item.gz ? 'actives' : ''"
          @mouseenter="change()"
          @mouseleave="goback()"
        >
          <i class="el-icon-star-off"></i>
        </div>

        <p class="diash4">可约:9:30至11:00 开放</p>
        <p class="disdas">特色小吃</p>
        <div class="disdas">名气厨师</div>
        <div class="disdas">从业13年</div>

        <div>
          <h6 class="tesbs">
            ￥{{ item.jiage}} 起&#8194;&#8194;
            <p class="sdasada">{{ item.yyrs }}人预约</p>
          </h6>
          <p class="dsap">{{ item.rq }}&#8194;{{ item.sj }}</p>
        </div>
      </div>
      

    </div>
    <div>
      <p class="dsadawda">我是有底线的~</p>
    </div>

    </div>
  </div>
</template>

<script>
// import a from './a'; // 引入组件
import Fanhui from "../utils/fanhui.vue";

export default {
  name: "",
  components: {
    Fanhui
  },
  data() {
    return {
      msg: "测试",
      ads:"dadas",
      as: "收藏厨师",
      guanzhu: 1,
      liked: false,
      content: "+关注",
      bg_color: "#fef0f0",
      ft_color: "#f56c6c",
      dataList: [
        {
          name: "张三丰",
          jiage: 12,
          yyrs: 111,
          rq: "08/29",
          sj: "12:39",
          gz: 0,
        },
        {
          name: "铁山靠",
          jiage: 123,
          yyrs: 121,
          rq: "08/30",
          sj: "16:39",
          gz: 1,
        },
        {
          name: "李太白",
          jiage: 11,
          yyrs: 12,
          rq: "07/31",
          sj: "09:39",
          gz: 0,
        },
        {
          name: "孙一宁",
          jiage: 10,
          yyrs: 11,
          rq: "05/10",
          sj: "23:39",
          gz: 1,
        },
      ],
    };
  },
  // 生命周期 - 创建完成（访问当前this实例）
  created() {},
  // 生命周期 - 挂载完成（访问DOM元素）
  mounted() {},
  // Vue方法定义
  methods: {
    getDataList(){
      this.$store.dispatch('')
    },


    favor(e) {
      this.liked = !this.liked;
      if (this.liked) {
        this.content = "已关注";
        this.bg_color = "#f56c6c";
        this.ft_color = "#fef0f0";
      } else {
        this.content = "+关注";
        this.bg_color = "#fef0f0";
        this.ft_color = "#f56c6c";
      }
    },
    change() {
      this.bg_color = "#ff9999";
      this.ft_color = "#fef0f0";
    },
    goback() {
      if (this.liked) {
        this.bg_color = "#f56c6c";
        this.ft_color = "#fef0f0";
      } else {
        this.bg_color = "#fef0f0";
        this.ft_color = "#f56c6c";
      }
    },
  },
};
</script>

<style scoped>
.huadongranru{
  animation-duration: 1.5s;
  /* border-radius: 4px; */
  animation-name: animateLeft;
}

@keyframes animateLeft {
  0% {
    transform: translateY(160px);
  }
  100%{
    /* opacity: 0; */
    transform: translateY(0px);
    
  }
}

.dsadawda{
  text-align: center;
  font-size: 13px;
  color: rgb(185, 184, 184);
}
.actives {
  background-color: rgb(204, 22, 22);
}
.my_button {
  border-radius: 50% 50%;
  float: right;
  margin: -11px 12px 0 0;
}
.tesbs {
  display: flex;
  float: left;
  margin: 19px 0 0 0;
  color: #fc654a;
}
.sdasada{
  color: black;
}
.dsap {
  margin: 19px 8px 0 0;
  font-size: 12px;
  float: right;
}
.disdas {
  display: inline;
  border: 1px solid rgb(214, 175, 85);
  height: 20px;
  width: 30px;
  color: #fc654a;
  border-radius: 7px 7px 7px 7px;
  font-size: 9px;

}
.zuo {
  border: 1px solid rgb(87, 173, 147);
  height: 103px;
  width: 67px;
  margin: 18px 0 0 2px;
  float: left;
}
.you {
  height: 116px;
  width: 271px;
  margin: 10px 0 0 5px;
  float: right;
}
.diash4 {
  font-size: 11px;
  color: rgb(107, 105, 105);
  margin: 9px 0 0 0;
}
.rsesw {
  height: 147px;
  width: 356px;
  margin: 7px 7px;
  float: left;
  box-shadow: 1px 1px 11px 4px #b7b8b95b;
  border-radius: 11px 11px 11px 11px;
}
.souds {
  position: absolute;
  left: 70px;
  top: 78px;
}
.sousuo input {
  height: 38px;
  width: 297px;
  widows: 306px;
  text-align: center;
  line-height: 38px;
  color: rgb(107, 105, 105);
  box-shadow: 1px 1px 9px 5px #b7b8b95b;
  border-radius: 28px 28px 28px 28px;
  margin: 9px 50px;
  border: none;
}
.inputse {
  background: none;
  outline: none;
}
.inputse:focus {
  border: none;
}
.box {
  width: 100%;
  height: 100%;
}
</style>